//入口文件
import Vue from "vue";

import app from "./App.vue"; //导入根组件


//1.1导入vue-router
import VueRouter from "vue-router"; //引用路由模块
//1.2安装vue-router
Vue.use(VueRouter); //在Vue中使用router模块
import router from "./router.js"; //导入自定义路由模块


//2.1导入vue-resource
import VueResource from "vue-resource";
//2.2安装vue-resource
Vue.use(VueResource);

//1.0导入vuex
import Vuex from "vuex";
//2.0安装vuex
Vue.use(Vuex);

//每次进入网站，肯定会加载index.js，在刚调用的时候，就把本地存储的数据拿出来，放到store的car上
var car = JSON.parse(localStorage.getItem("car") || "[]"); //JSON.parse字符串转数组

var store = new Vuex.Store({
    state: { //this.$store.state.abc
        car: car
    },
    mutations: { //this.$store.commit(fun,a)
        addToCar(state, goodsinfo) { //第一个参数永远都是state

            var flag = false; //定义一个标识符，假设它没有找到，假设购物车里没有这个商品

            state.car.some(item => {
                if (item.id == goodsinfo.id) { //如果购物车里有这件商品，直接加数量就好了呀
                    item.count += parseInt(goodsinfo.count);
                    flag = true;
                    return true; //终止循环，跳出循环
                }
            });

            if (flag == false) { //如果购物车里没有这项商品的话，goodsinfo把信息push进去
                state.car.push(goodsinfo);
            }

            //当car更新之后，把car数组存储到本地的localStorage中
            localStorage.setItem("car", JSON.stringify(state.car));

        },
        updateGoodsInfo(state, goodsinfo) {
            //为什么不调用addToCar?
            //因为上面的方法是+=，购物车里的选择框（update）应该是覆盖，不应该+=
            state.car.some(item => {
                    if (item.id == goodsinfo.id) {
                        item.count = parseInt(goodsinfo.count);
                        return true; //这里的return是结束循环的意思
                    }
                })
                //当car更新之后，把car数组存储到本地的localStorage中
            localStorage.setItem("car", JSON.stringify(state.car));
        },
        removeFromCar(state, id) {
            // 根据id，从store中的购物车中删除对应的那条商品的数据
            state.car.some((item, i) => {
                if (item.id == id) {
                    state.car.splice(i, 1)
                    return true;
                }
            })

            //当car更新之后，把car数组存储到本地的localStorage中
            localStorage.setItem("car", JSON.stringify(state.car));
        },
        updateGoodsSelect(state, info) {
            state.car.some(item => {
                if (item.id == info.id) {
                    item.select = info.select;
                }
            })

            //当car更新之后，把car数组存储到本地的localStorage中
            localStorage.setItem("car", JSON.stringify(state.car));
        }
    },
    getters: { //this.$store.getters.abc
        //相当于计算属性，也相当于过滤器（filters）
        getAllCount(state) {
            var c = 0;
            state.car.forEach(item => {
                c += item.count;
            })
            return c;
        },
        getGoodsCount(state) {
            var o = {};
            state.car.forEach(item => {
                o[item.id] = item.count;
                // 得到这样的一串对象{ 88: 2, 89: 1, 90: 4 }
            })
            return o;
        },
        getGoodsSelect(state) {
            var o = {};
            state.car.forEach(item => {
                o[item.id] = item.select;
            })
            return o;
        },
        getGoodsCountAndAmount(state) {
            var o = {
                count: 0, //勾选的数量
                amount: 0 //勾选的总价
            }
            state.car.forEach(item => {
                if (item.select) {
                    o.count += item.count
                    o.amount += item.count * item.price
                }
            })
            return o;
        }
    }
});


//导入mui样式
import "./mui/css/mui.min.css";
import "./mui/css/icons-extra.css";

import "./css/list.css";

//1.0导入VuePreview插件，缩略图功能
import VuePreview from "vue-preview";
//2.0安装vue-resource
Vue.use(VuePreview);


//引入需要的样式
import { Header, Swipe, SwipeItem, Button, Lazyload, Switch } from "mint-ui"; //Mint-ui的Header区
Vue.component(Header.name, Header);
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
Vue.component(Button.name, Button);
Vue.component(Switch.name, Switch);

//2安装Lazyload
Vue.use(Lazyload);


var vm = new Vue({
    el: "#app",
    data: {},
    methods: {},
    render: c => c(app), //通过render函数将App根组件渲染到页面上
    router: router, //挂载路由对象
    store: store //挂载store

});